<template>
  <div>

    <div class="main-navigation">
      <button class="navigation-abel">
        个人信息
      </button>
    </div>

    <!-- 主体内容 -->
    <div class="main">
      <!-- 左侧导航区 -->
      <section class="left-each">

        <div class="top-each">
          <!-- 头像 -->
          <span class="right-photo">
            <img class="img" :src="`${src1 + myMessage.photo }`" v-if="myMessage.photo!==''">
            <img class="img" src="@/assets/images/profile.jpg" v-if="myMessage.photo ==''">
          </span>
          <!-- 右侧信息框 -->
          <div class="left-each">
            <!-- 身份信息 -->
            <div class="left-partiarch">
              <span>家长</span>
            </div>

            <!-- 查看 -->
            <button class="left-more" @click="personal">
              <span style="font-size:.875rem;cursor: pointer;">查看更多</span>
              <span style="margin-left: .3125rem;">⟩</span>
            </button>
          </div>

        </div>

        <!-- 导航栏 -->
        <button @click="setIndex(index)" v-for="(item, index) in navigationData" class="each" :key="index" :class="{ active:index == curIndex }">
          {{item.name}}</button>
      </section>

      <rightInfo v-if="99==curIndex"></rightInfo>
      <mybaby v-if="0==curIndex"></mybaby>

    </div>

  </div>

</template>

<script>
import { getMyManage1 } from '@/api/myInfo/index';
import rightInfo from './rightInfo';
import mybaby from './mybaby';
import module from "@/allurlimg/img";

export default {
  components: {
    rightInfo,
    mybaby,
  },
  data () {
    return {
      src1: '',
      navigationData: [
        { name: '我的孩子' }
      ],
      curIndex: 99,
      myChild: true,   // 我的孩子
      myMessage: [],
    }
  },
  mounted () {
    this.gets()
    this.src1 = module.host
  },

  methods: {
    setIndex (index) {
      this.curIndex = index
    },
    personal () {
      this.curIndex = 99
    },
    getData (data) {
      for (const key in data) {
        this.myMessage = {
          id: key,
          name: data[key][0],
          call: data[key][1],
          photo: data[key][2],
        }
      }
    },
    async gets () {
      const res = await getMyManage1({})
      this.getData(res.data)
    }
  },
}

</script>

 <style scoped>
/* 主体内容 */
.main {
  display: flex;
  flex-direction: row;
  margin: 1.25rem 9.75rem 10rem 9.75rem;
}

/* 左侧导航区 */
.left-each {
  display: flex;
  flex-direction: column;
  width: 13.75rem;
  height: 44.375rem;
  margin: 2.5rem 1.25rem;
  background: #f5f5f5;
}

/* 信息框 */
.top-each {
  display: flex;
  flex-direction: row;
  height: 5rem;
}

/* 头像 */
.top-each .right-photo {
  width: 4.375rem;
  height: 4.375rem;
  border-radius: 50%;
  margin: 0.3125rem;
}

/* 右侧信息框 */
.top-each .left-each {
  display: flex;
  flex-direction: column;
  margin: 0.625rem;
  height: 3.75rem;
}

/* 身份信息 */
.top-each .left-partiarch {
  width: 3.75rem;
  height: 1.25rem;
  font-size: 0.75rem;
  margin-top: 0.4375rem;
  border-radius: 0.3125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: #7c0000;
}

/* 查看 */
.top-each .left-more {
  display: flex;
  font-size: 0.75rem;
  margin-top: 0.4375rem;
  height: 1.25rem;
  border-radius: 0.3125rem;
  padding: 0.125rem 0.4375rem;
  color: #000000;
  border: 0rem solid;
  background: #f5f5f5;
}

/* 导航栏 */
.left-each .each {
  border: 0.0625rem solid #f7f8fa;
  padding: 0.875rem 0 0.875rem 0rem;
  background: #fff;
  font-size: 1.25rem;
  cursor:pointer;
}

/* 点击触发 */
.left-each .active {
  background: #7c0000;
  color: #ffffff;
}

/*头像照片*/
img {
  height: 4rem;
  width: 4.375rem;
  border-radius: 50%;
}

/* 标签导航区内容 */
.main-navigation {
  margin: 1.25rem;
  display: flex;
  margin: 0 14.375rem 0 14.375rem;
  flex-direction: row;
}
.icon-shouye-copy {
  color: rgb(202, 160, 166);
  font-size: 1.5625rem;
  margin-right: 0.1875rem;
}
.icon-right-1-copy {
  color: darkgray;
  font-size: 1.5625rem;
  padding: 0.4375rem;
}
.navigation-abel1 {
  width: 6.25rem;
  border-radius: 1.5625rem;
  border: 0rem;
  padding: 0.625rem;
  line-height: 0.9375rem;
  font-size: 1.25rem;
}

/* 导航标签 */
.navigation-abel {
  line-height: 1.5625rem;
  font-size: 1.25rem;
  border-radius: 1.5625rem;
  padding: 0.5rem 1.3125rem 0.5rem 1.375rem;
  border: 0rem;
  background: #f2e5e5;
}

.el-icon-arrow-right:before {
  font-size: 2.25rem;
}
</style>
